import React, { Component } from 'react';
class DemoForm extends Component {
  constructor() {
    super()
    this.state = {
      title: '受控组件标题',
      title1: '非受控组件标题'
    }
  }

  updateTitle = (e) => {
    console.log(e);
    this.setState({
      title: e.target.value
    })
  }

  // 创建ref对象
  titleRef = React.createRef()

  getTitle = (e) => {
    // 阻止浏览器默认行为
    e.preventDefault()
    console.log('ref-val',e, this.titleRef.current.value)
  }
  render () {
    console.log('ref', this.titleRef)
    return (<>
      <form onSubmit={this.getTitle}>
        <h2>03.受控与非受控组件</h2>
        <div>
          title:{this.state.title}
          <input type="text" value={this.state.title} onChange={this.updateTitle} />
        </div>
        <h2>04.非受控组件</h2>
        <div>
          title1:{this.state.title1}
          <input type="text" ref={this.titleRef} />
          {/* <button onClick={this.getTitle}>获取input的内容</button> */}
          <button>获取input的内容</button>
        </div>
      </form>
    </>);
  }
}

export default DemoForm;